<!-- el-pagination 二次封装 -->
<template>
  <div class="my-pagination">
    <el-pagination
      v-model:current-page="state.nowPage"
      v-model:page-size="state.pageSizeMax"
      :page-sizes="pageSizes"
      :small="small"
      :disabled="disabled"
      :background="background"
      :layout="layout"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script setup>
import { reactive, onMounted, watch } from 'vue'

const emits = defineEmits(['update:nowPage', 'update:pageSizeMax', 'handlePaginationChange'])
const props = defineProps({
  // 当前页码
  currentPage: {
    type: Number,
    default: 1
  },
  // 单页容量
  pageSize: {
    type: Number,
    default: 10
  },
  // 分页选项设置
  pageSizes: {
    type: Array,
    default: () => {
      return [10, 25, 50, 100]
    }
  },
  // 是否使用小型分页样式
  small: {
    type: Boolean,
    default: false
  },
  // 是否禁用分页
  disabled: {
    type: Boolean,
    default: false
  },
  // 是否为分页按钮添加背景色
  background: {
    type: Boolean,
    default: true
  },
  // 组件布局，子组件名用逗号分隔
  layout: {
    type: String,
    default: 'total, sizes, prev, pager, next, jumper'
  },
  // 总条数
  total: {
    type: Number,
    default: 0
  }
})

const state = reactive({
  nowPage: 1,
  pageSizeMax: 10
})

onMounted(() => {
  state.nowPage = props.currentPage ?? state.nowPage
  state.pageSizeMax = props.pageSize ?? state.pageSizeMax
})

// // 当前页码值监听
// watch(
//   () => state.nowPage,
//   newPage => {
//     console.log(newPage, 'newPage')
//     emits('update:nowPage', newPage)
//   }
// )

// // 当前页容量
// watch(
//   () => state.pageSizeMax,
//   newSize => {
//     console.log(newSize, 'newSize')
//     emits('update:pageSizeMax', newSize)
//   }
// )

/**
 * @description 切换当前页容量
 */
const handleSizeChange = val => {
  console.log(`${val} items per page`)
  emits('handlePaginationChange', { currentPage: state.nowPage, pageSize: val })
}
/**
 * @description 切换当前页码
 */
const handleCurrentChange = val => {
  console.log(`current page: ${val}`)
  emits('handlePaginationChange', { currentPage: val, pageSize: state.pageSizeMax })
}
</script>
<style scoped>
.example-pagination-block + .example-pagination-block {
  margin-top: 10px;
}
</style>
